import { useEffect } from 'react';
import { RouterProvider } from 'react-router-dom';

import { App as AntdApp } from 'antd';

import NProgress from '@/components/nprogress';

import { useDrawer, useModal } from './components/useFeedback';
import { router } from './routes';
import { useStore } from './store';

export const App: React.FC = () => {
  const store = useStore();
  // const layoutStore = useLayoutStore()
  // const navigate = useNavigate()
  // const location = useLocation()
  // const router = useRoutes(routerConfig as RouteObject[])
  const app = AntdApp.useApp();
  const [drawer, drawerHolder] = useDrawer();
  const [modal, modalHolder] = useModal();

  // useLayoutEffect(() => {
  //   layoutStore.navigate = navigate
  //   layoutStore.location = location
  // }, [layoutStore, location, navigate])

  useEffect(() => {
    store.app = app;
  }, [app, store]);

  useEffect(() => {
    store.drawer = drawer;
    store.modal = modal;
  }, [drawer, modal, store]);

  return (
    <>
      <>{/* { router } */}</>
      <>
        <RouterProvider router={router} />
      </>
      {/* <HashRouter>
        <Routes>
          {
            renderRoutes(routerConfig)
          }
        </Routes>
      </HashRouter> */}

      <NProgress />
      {drawerHolder}
      {modalHolder}
    </>
  );
};
